<template>
  <div>
    <div class="text-right">
      <el-button size="small" icon="el-icon-printer" :loading="printLoading" @click="printPage">
        打印
      </el-button>
    </div>
    <div :id="printId">
      <h3 class="text-center">推荐表</h3>
      <table class="table table-bordered vertical-align-middle">
        <tbody>
          <tr>
            <td rowspan="6" width="15%" class="text-center bg-gray font-weight-bold">主体信息</td>
            <td class="text-center bg-light" width="15%">主体姓名</td>
            <td colspan="3" width="70%">{{ relatedData.customer_name }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">经营者姓名</td>
            <td style="min-width: 120px">{{ relatedData.corp_name }}</td>
            <td class="text-center bg-light">身份证号码</td>
            <td>{{ relatedData.lender_idcard }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">所在地址</td>
            <td colspan="3">{{ relatedData.address }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">项目类型</td>
            <td colspan="3">{{ enumProjectType[relatedData.project_type] }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">联系方式</td>
            <td colspan="3">{{ relatedData.mobile_no }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">生产经营范围</td>
            <td colspan="3" class="text-indent">{{ relatedData.business_scope || '-' }}</td>
          </tr>
          <tr>
            <td rowspan="3" class="text-center bg-gray font-weight-bold">资金需求</td>
            <td class="text-center bg-light">申请资金</td>
            <td colspan="3">{{ relatedData.apply_funds }} 万元</td>
          </tr>
          <tr>
            <td class="text-center bg-light">贷款年限</td>
            <td colspan="3">{{ relatedData.load_years }} 年</td>
          </tr>
          <tr>
            <td class="text-center bg-light">主要用途</td>
            <td colspan="3">{{ relatedData.funds_use_dir || '-' }}</td>
          </tr>
          <tr>
            <td class="text-center bg-gray font-weight-bold">企业基本情况</td>
            <td colspan="4">详情见数字信息用档案卡。</td>
          </tr>
          <tr>
            <td class="text-center bg-gray font-weight-bold">推荐意见</td>
            <td class="text-center bg-light">乡镇（管理部门）意见</td>
            <td colspan="3">
              <p class="text-indent">
                {{ relatedData.recommend_opinion || '-' }}
              </p>
              <div class="text-right">
                <div style="letter-spacing: 2rem">盖章</div>
                {{ $utils.dateFormat(relatedData.recommend_time, 'yyyy年MM月dd日') || '-' }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { enumProjectType } from '@/gov/plugins/enum'
import { printA4 } from '@vimi/utils-tool'
export default {
  components: {},
  props: {
    relatedData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      enumProjectType,
      printLoading: false,
    }
  },
  computed: {
    printId() {
      return `print-recommend-${this.relatedData.customer_related_id}`
    },
  },
  watch: {},
  mounted() {},
  created() {},
  methods: {
    printPage() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        body {font-family: SimSun;}
        .text-indent{text-indent: 2rem;}
        .vertical-align-middle td {vertical-align: middle;}
      `
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.bg-gray {
  background-color: $gray-200;
}
.text-indent {
  text-indent: 2rem;
}
</style>
